// 对于axios的二次封装--使用请求和拦截器需要进行二次封装axios
import axios from "axios";
import { config } from "shelljs";
// 引入进度条nprogress
import nprogress from "nprogress";
// star--进度条开始的方法
// done--进度条结束的方法
// 引入进度条样式-css
import "nprogress/nprogress.css";

// console.log(nprogress)

// 1-创建axios实例：：使用axios的对象的方法create来创建axios实例
// request就是axios--需要稍微配置一下

const request = axios.create({
  baseURL: "/api", // 配置对象
  timeout: 5000 //请求超时的时间5秒--之内没有成功就结束
});
// request 请求拦截器（请求之前做件事）和respone 相应拦截器（请求之后做件事）
// request 请求拦截器
request.interceptors.request.use(config => {
  //通过上行请求的请求头，把用户临时身份带给服务器
  //请求头添加的属性名字不能瞎写，因为已经和后台人员商量好了
  //如果不叫做userTempid字段，服务器获取不到
  //config配置对象，这里面有请求头headers
  //config，请求拦截器的一个配置对象

  // 进度条开启--start方法
  nprogress.start();
  return config;
});

// respone 相应拦截器
request.interceptors.response.use(
  res => {
    // 成功的回调函数：服务器返回数据后检测到并且做一些事情

    // 进度条结束(关闭)--done
    nprogress.done();
    return res.data;
  },
  error => {
    // 服务器相应失败的回调函数--失败的回调
    return Promise.reject(new Error("faile"));
  }
);

// 对外暴露axios
export default axios;

// 小提示！！
//在jq中 我们向后端发送请求 使用的是$.ajax
//在原生中 我们使用的是Xml 来发送请求
//在vue中 同创使用axios来发送请求
//axios起始就是一个对象 他讲所有的请求 封装成了对象中的属性
//比如 post=>axios.post()
// get=>axios.get()
//通常 我们不直接 使用axios
//axios 中  没有做同步异步的处理 多以 同步异步 需要我们手动封装
//封装时  采用 es6中的promise对象
/*
Promise对象 (是一个构造函数)
es6中异步编程的一种解决方案
(目前最先进的解决方案  就是  async 和await的搭配)
async和await的实现  是通过Promise来实现的

好处:
 防止回调地狱
 提高代码可读性
 向同步一样去执行异步操作*/
